import Vue from 'vue'

const app = new Vue({
  // el: '#root',
  //  可以使用render方法替代
  // template: '<div>{{text}}</div>',
  data: {
    text: 0
  },
  beforeCreate () {
    console.log(this.$el, 'beforeCreate')
  },
  created () {
    console.log(this.$el, 'created')
  },
  beforeMount () {
    console.log(this.$el, 'beforeMount')
  },
  mounted () {
    console.log(this.$el, 'mounted')
  },
  beforeUpdate () {
    console.log(this.$el, 'beforeUpdate')
  },
  updated () {
    console.log(this.$el, 'updated')
  },
  activated () {
    console.log(this, 'activated')
  },
  deactivated () {
    console.log(this, 'deactivated')
  },
  beforeDestroy () {
    console.log(this.$el, 'beforeDestroy')
  },
  destroyed () {
    console.log(this.$el, 'destroyed')
  },
  render (h) {
    // throw new TypeError('render error')
    console.log('render function')
    return h('div', {}, this.text)
  },
  renderError (h, err) {
    //  当前组件捕获异常
    return h('div', {}, err.stack)
  },
  errorCaptured () {
    // 所有子组件可以捕获异常，向上冒泡
  }
})

app.$mount('#root')
app.text += 2
app.$destroy()
